import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Tabs,
  Table,
  Select,
  Checkbox,
  Space,
  message,
  InputNumber,
} from "antd";
import { useState, forwardRef, useImperativeHandle, useRef } from "react";
// import styles from './styles.less'
// const { TextArea } = Input
import { namespace } from "./configFile";

export default forwardRef((props, ref) => {
  const { dispatch, reload } = props;
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();
  const [salaryTypeData, setSalaryTypeData] = useState([]);

  const submitForm = async () => {
    let res = await form.validateFields();
    if (res) {
      let salaryTypeJson = [];
      Object.keys(res).forEach((k) => {
        let salary = salaryTypeData.filter((s) => s.salaryTypeName === k);
        if (salary.length) {
          let { salaryTypeName, countMethod } = salary[0];
          salaryTypeJson.push({
            salary_type_name: salaryTypeName,
            count_method: countMethod,
            values: res[k],
          });
        }
      });
      dispatch({
        type: `${namespace}/submitItem`,
        params: {
          userId: res.userId,
          salaryTypeJson: JSON.stringify(salaryTypeJson),
        },
        callback: () => {
          setOpen(false);
          reload();
        },
      });
    }
  };

  useImperativeHandle(ref, () => ({
    setOpen,
    form,
    setSalaryTypeData,
  }));

  return (
    <Modal
      open={open}
      title="员工工资设置"
      forceRender
      onCancel={() => setOpen(!open)}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={submitForm} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form}>
        <Form.Item name="userId" hidden>
          <Input />
        </Form.Item>
        <Form.Item label="所属场馆" name="venueName">
          {" "}
          {form.getFieldValue("venueName")}{" "}
        </Form.Item>
        <Form.Item label="员工名称" name="nickName">
          {" "}
          {form.getFieldValue("nickName")}{" "}
        </Form.Item>
        <h3>工资加项</h3>
        {salaryTypeData
          .filter((item) => item.countMethod == 1)
          .map((item) => (
            <Form.Item
              label={item.salaryTypeName}
              name={item.salaryTypeName}
              rules={[{ required: true }]}
            >
              <InputNumber min={0} defaultValue={0} style={{ width: "100%" }} />
            </Form.Item>
          ))}
        <h3>工资减项</h3>
        {salaryTypeData
          .filter((item) => item.countMethod == 2)
          .map((item) => (
            <Form.Item
              label={item.salaryTypeName}
              name={item.salaryTypeName}
              rules={[{ required: true }]}
            >
              <InputNumber min={0} defaultValue={0} style={{ width: "100%" }} />
            </Form.Item>
          ))}
      </Form>
    </Modal>
  );
});

// export default Dom
